<template>
    <div class="examination">
        <div class="grade">
            <!-- <LeftTabs/> -->
            <div class="grade-item" :style="{color:index ==activeIndex?'#fff':'#a0d4ee',fontSize:index ==activeIndex?'40px':'30px'}" v-for="(item,index) in grade" :key="item.value" @click="gradeChange(index)">{{ item.label }}</div>
        </div>
        <img class="left-bottom" src="@/assets/images/examination-left-bottom.png" />
        <div class="content">
            <div class="content-header">
                <div class="content-header-name">
                    <img src="@/assets/images/examination-select-ic.png" />
                    <div>今日考试班级</div>
                </div>
                <div class="content-header-confirm" @click="handleConfirm">去考试</div>
            </div>

            <div class="content-body">
                <div class="content-body-item" v-for="(item,index) in list" @click="handleClick(index)" :style="{background: item['active'] ? '#157DBE' : '#009DFF',border:item['active'] ?'2px solid #FFFFFF':'none',boxShadow:item['active'] ?'inset 0px 0px 20px 0px #FFFFFF':'none'}">
                    <div class="content-body-item-date">
                        <div class="content-body-item-date-week">{{ item.week }}</div>
                        <div class="content-body-item-date-day">{{ item.date }}</div>
                    </div>
                    <div class="content-body-item-time">
                        <div class="content-body-item-time-label">考试时间</div>
                        <div class="content-body-item-time-value">{{ item.hm }}</div>
                    </div>
                    <div class="content-body-item-line"></div>

                    <div class="content-body-item-class">
                        <div class="content-body-item-class-label">运动班级</div>
                        <div class="content-body-item-class-value">{{ item.bjName }}</div>
                    </div>
                    <div class="content-body-item-line"></div>

                    <div class="content-body-item-num">
                        <div class="content-body-item-class-label">运动人数</div>
                        <div class="content-body-item-class-value">{{item. classStudentTotal }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="Examination">
import { ref, computed, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import LeftTabs from "@/components/LeftTabs";
import { getPlan } from "@/api/tc/plan";
import { getDicts } from "@/api/system/dict/data";
const { proxy } = getCurrentInstance();
const plan = ref([]);
const route = useRoute();
const router = useRouter();
const grade = ref([]); //年纪
const list = ref([]);//考试计划
const activeIndex = ref(0);

function handleClick(index) {
    list.value.forEach(i => i['active'] = false)
    if (list.value[index]['active']) {
        list.value[index]['active'] = false;
    } else {
        list.value[index]['active'] = true;
    }
}

/**
 * 年级点击事件
 * @param index 
 */
function gradeChange(index) {
    activeIndex.value = index;
    list.value = grade.value[index].plan;
}


/**
 * 获取数据
 */
async function getData() {
    try {
        proxy.$modal.loading('加载中');
        //获取年级字典
        const dict = await getDicts("tc_nj")
        //获取考试计划
        const res = await getPlan();
        for (const key in res.data) {
            let f = dict.data.find(f => parseInt(f.dictValue) == key);
            res.data[key].forEach(i => {
                const d = proxy.dayjs(i.sd)
                const date = d.format("MM/DD")       // 08/22
                const week = d.format("dddd")        // 星期五
                const hm = d.format("HH:mm")              // 17:00
                i['week'] = week
                i['date'] = date;
                i['hm'] = hm + '-' + proxy.dayjs(i.ed).format("HH:mm");
            })
            grade.value.push({ label: f.dictLabel, value: key, plan: res.data[key] })
        }
        list.value = grade.value[activeIndex.value].plan;
    } catch (err) {
        console.error(err)
    } finally {
        proxy.$modal.closeLoading();
    }
}


/**
 * 根据不同项目跳转不同页面
 */
function handleConfirm(e) {
    let item = list.value.find(f => f['active']);
    if (item) {
        router.push({ path: `/project`, query: { planId: item.id } })
    } else {
        proxy.$modal.msgError("请选择考试班级")
    }
}

getData();
</script>
<style scoped lang="scss">
.examination {
    width: 100%;
    height: 100%;
    background: url("@/assets/images/examination-bg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    padding: 200px 4px 0 40px;
    box-sizing: border-box;
    // justify-content: space-between;
    // overflow-y: auto;
    overflow: hidden;
}

.left-bottom {
    position: absolute;
    left: 38px;
    bottom: 40px;
    width: 235px;
    height: 262px;
}

.content {
    margin-left: 20px;
    width: 1580px;
    height: 850px;
    background: #a0d4ee;
    border-radius: 24px;
    padding: 20px;
    background: linear-gradient(
        244deg,
        rgba(24, 104, 130, 0.12) 0%,
        rgba(37, 40, 104, 0.12) 99%
    );
    overflow: hidden;
    &-body {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        // max-height: 730px;
        max-height: 730px;
        overflow-y: auto;
        &-active {
            background: #157dbe;
            box-sizing: border-box;
            border: 2px solid #ffffff;
            box-shadow: inset 0px 0px 20px 0px #ffffff;
        }

        &-item {
            cursor: pointer;
            margin-bottom: 20px;
            width: 760px;
            height: 164px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            background: #009dff;
            &-line {
                background: #2457af;
                width: 1px;
                height: 54px;
                margin: 0 10px;
            }
            &-num {
                color: #ffffff;
                overflow: hidden;
                width: 100px;
                &-label {
                    font-size: 24px;
                    margin-bottom: 10px;
                    opacity: 0.8;
                }
                &-value {
                    margin-top: 14px;
                    font-weight: bold;
                    font-size: 36px;
                    line-height: 40px;
                    color: #ffffff;
                }
            }
            &-class {
                color: #ffffff;
                overflow: hidden;
                width: 216px;

                &-label {
                    font-size: 24px;
                    margin-bottom: 10px;
                    opacity: 0.8;
                }
                &-value {
                    height: 40px;
                    margin-top: 14px;
                    font-weight: bold;
                    font-size: 36px;
                    line-height: 40px;
                    color: #ffffff;
                }
            }

            &-time {
                margin-left: 16px;

                color: #ffffff;
                overflow: hidden;

                &-label {
                    font-size: 24px;
                    margin-bottom: 10px;
                    opacity: 0.8;
                }
                &-value {
                    margin-top: 14px;
                    font-weight: bold;
                    font-size: 40px;
                    line-height: 40px;
                    color: #ffffff;
                }
            }
            &-date {
                margin-left: 16px;
                background: url("@/assets/images/examination-body-date-bg.png")
                    no-repeat;
                background-size: 100% 100%;
                width: 131px;
                height: 118px;
                overflow: hidden;
                &-week {
                    margin: 18px 0 0 18px;
                    font-size: 24px;
                    line-height: 26px;
                    color: #333;
                }
                &-day {
                    margin: 14px 0 0 4px;
                    font-size: 40px;
                    color: #ff9a00;
                    font-weight: boild;
                }
            }
        }
    }
    &-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        &-name {
            display: flex;
            align-items: center;
            img {
                width: 60px;
                height: 46px;
            }
            div {
                margin-left: 20px;
                font-size: 44px;
                line-height: 58px;
                color: #ffffff;
            }
        }
        &-confirm {
            cursor: pointer;
            width: 198px;
            height: 70px;
            border-radius: 10px;
            display: flex;
            color: #ffffff;
            font-size: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(
                289deg,
                #3f17b1 0%,
                #3f17b1 0%,
                #a352ff 35%,
                #3842ff 65%,
                #00ceff 100%
            );
            &:hover {
                opacity: 0.7;
            }
        }
    }
}
.grade {
    width: 250px;
    margin-top: 80px;
    &-item {
        cursor: pointer;
        width: 100%;
        display: flex;
        justify-content: center;
        font-family: DingTalk JinBuTi;
        font-size: 34px;
        font-weight: normal;
        line-height: 58px;
        font-variation-settings: "opsz" auto;
        font-feature-settings: "kern" on;
        color: #a0d4ee;
    }
}
</style>

